<!-- 消息 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar" :style="{'height': tabbarHeight,'paddingTop': tabbarTop}">
			<view class="tabbar-title flex justify-center">
				消息
			</view>
		</view>
		<!-- 中心内容区域 -->
		<view class="login" v-if="!loged">
			<text>您还没有登录，请先</text><text class="txt" @click="login">登录</text>
		</view>
		<view class="none" v-if="kong&&loged">
			<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/vip/%E7%A9%BA%E7%8A%B6%E6%80%81.png"></image>
			<view class="txt">快去找心仪的岗位沟通吧~</view>
		</view>
		<view class="content" v-if="loged">
			<view class="search">
				<u-search placeholder="搜索联系人" v-model="listQurey.keywords" :show-action="false" @change="search"
					@confirm="search"></u-search>
			</view>
			<view class="switch">
				<view class="titlename flex">
					<view class="text0 flex justify-center align-center" :class="active==0?'active':''"
						@click="change1">
						全部
					</view>
					<view style="width: 30rpx;">

					</view>
					<view class="text1 flex justify-center align-center" :class="active==1?'active':''"
						@click="change2">
						已投简历
					</view>
				</view>
				<view class="icon" :style="{'animation': `${status} 0.3s  ease-in-out 0s 1 alternate forwards`}">

				</view>
			</view>
			<swiper class="swiper"
				:style="{'height': `calc(100vh - 50px - ${titleHeight}px - ${tabbarHeight} - 124rpx - 30rpx - env(safe-area-inset-bottom))`}">
				<swiper-item class="swiper-item" style="height: 100%;" @touchmove.stop>
					<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrollToLower1"
						 lower-threshold='30'
						@refresherrefresh="onfresh" :refresher-triggered="triggered" :refresher-threshold="45" refresher-enabled="refresher">
						<u-swipe-action class="swipeaction" btn-width="130" :options="option" :key="item.roomNumber"
							v-for="item in list"  @open="open0(item.roomNumber)" @click="cli0(item.roomNumber)"
							@content-click.stop="linkDetail(item.roomNumber)">
							<view class="goods">
								<MessageItem class="messageitem" :item="item">
								</MessageItem>
							</view>
						</u-swipe-action>
						<loading :load1="load1" :load2="2" :load3="2"></loading>
					</scroll-view>
				</swiper-item>
				<!-- <swiper-item class="swiper-item" style="height: 100%;" @touchmove.stop>
					<scroll-view scroll-y="true" style="height: 100%;">
						<u-swipe-action class="swipeaction" btn-width="130" :options="option" :show="item.show"
							v-for="item in list" :key="item.id" @open="open1(item.roomNumber)" @click="cli1"
							@content-click.stop="linkDetail(item.roomNumber)">
							<view class="goods" style="height: 100%;">
								<MessageItem class="messageitem" :item="item">
								</MessageItem>
							</view>
						</u-swipe-action>
					</scroll-view>
				</swiper-item> -->
			</swiper>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :border-top="false" :before-switch="click" inactive-color="#666666"
			active-color="#333333"></u-tabbar>
	</view>
</template>

<script>
	import MessageItem from '@/components/messageItem/messageItem.vue'
	export default {
		components: {
			MessageItem
		},
		data() {
			return {
				tabbar: this.$store.state.list, //tabbar数据
				tabbarTop: 0,
				tabbarHeight: 0,
				titleHeight: 0,
				background: {
					background: 'linear-gradient(135deg, #1C79F8, #0265EB)' //顶部导航背景色
				},
				square: '',
				active: 0,
				status: '',
				list: [],
				load1: 2,
				load2: 2,
				load3: 2,
				option: [{
					style: {
						backgroundImage: 'url(https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/delete.png)',
						backgroundRepeat: 'no-repeat',
						backgroundSize: '70rpx 70rpx',
						backgroundPosition: 'center center'
					}
				}],
				listQurey: {
					pageSize: 10,
					pageNum: 1,
					resumeStatus: 0,
					keywords: ''
				},
				dleQurey: {
					roomNumber: Number
				},
				kong:false,
				loged:false,
				triggered:false,
				_freshing: false,
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			//初始化
			init() {
				this._setTabbarTitleHeight()
				// this._getTitleHeight()
				if(uni.getStorageSync('openId')){
					this.loged = true
					this.listQurey.pageNum = 1
					this.list = []
					this.getdata()
				}
				
			},
			//删除列表
			async cli0(e){
				this.dleQurey.roomNumber = e
				let {code} = await this.$remove('/userChatList/deleteAMessage',this.dleQurey)
				console.log(e)
				if(code == 200){
					this.list.forEach((item,index)=>{
						if(item.roomNumber == e){
							this.list.splice(index,1)
							console.log('find')
						}
					})
				}
			},
			onfresh(){
				if(this._freshing){
					return
					} 
				this._freshing = true
				this.triggered = true
				this.load1 = 2
				this.list = []
				this.listQurey.pageNum = 1
				this.getdata()
				setTimeout(()=>{
					this.triggered = false
					this._freshing = false
				},1000)
			},
			scrollToLower1() {
				if (this.load1 != 1) {
					this.listQurey.pageNum += 1
					this.getdata()
				}
			},
			change1() {
				this.active = 0
				this.listQurey.resumeStatus = 0
				this.list = []
				this.getdata()
			},
			change2() {
				this.active = 1
				this.listQurey.resumeStatus = 1
				this.list = []
				this.getdata()
			},
			//职位列表点击进入详情页
			linkDetail(id) {
				uni.setStorageSync('roomNum', id)
				uni.navigateTo({
					url: '/pagesA/chat/chat'
				})
				console.log(id)
			},
			//滑块打开和关闭
			open0(index) {
				this.list.forEach(item => {
					if (index == item.id) {
						item.show = true;
					} else {
						item.show = false;
					}
				})
			},
			//请求列表
			async getdata() {
				let {
					data: list,
					code
				} = await this.$get('/userChatList/list', this.listQurey)
				if(code == 200){
					if(this.listQurey.pageNum == 1){
						if(list.records.length!=10){
							this.load1 = 1
						}else{
							this.load1 = 0
						}
					}else{
						if(list.records.length!=0){
							this.load1 = 0
						}else{
							this.load1 = 1
						}
					}
					
					this.list = this.list.concat(list.records) 
				}
			},
			search() {
				this.listQurey.pageNum = 1
				this.list = []
				this.getdata()
			},
			// open1(index) {
			// 	this.list.forEach(item => {
			// 		if (index == item.id) {
			// 			item.show = true;
			// 		} else {
			// 			item.show = false;
			// 		}
			// 	})
			// },
			//滑块组件点击事件(删除逻辑)
			cli(e) {
				console.log(2)
			},
			login(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top + 'px'
				this.tabbarHeight = top.bottom + 10 + 'px'
			},
			//获取切换栏高度
			// _getTitleHeight() {
			// 	uni.createSelectorQuery().select('.titlename').boundingClientRect(item => {
			// 		this.titleHeight = item.height
			// 	}).exec()
			// },
			//tabbar切换前的回调
			click(e) {
				return true
			},
		},
		watch: {
			active(news, old) {
				if (news == 1 && old == 0) {
					this.status = 'mobile1'
				} else if (news == 0 && old == 1) {
					this.status = 'mobile2'
				}
			},
			list(){
				if(this.list.length == 0){
					this.kong = true
					this.load1 = 2
					console.log(this.kong)
				}else{
					this.kong = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		//padding-bottom: env(safe-area-inset-bottom);

		.tabbar {
			background: linear-gradient(135deg, #1C79F8, #0265EB); //顶部导航背景色
			position: relative;

			.tabbar-title {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 600;
			}
		}
		.login{
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
			.txt{
				color: #0055ff;
			}
		}
		.none{
			position: absolute;
			left:50%;
			top:50%;
			transform: translate(-50%,-50%);
			image{
				width: 250rpx;
				height: 250rpx;
			}
			.txt{
				padding-top: 40rpx;
				color: #999999;
				font-size: 24rpx;
			}
		}

		.content {
			.search {
				padding: 30rpx;
			}

			.switch {
				padding: 0 30rpx;

				.titlename {
					font-weight: 400;
					color: #666666;
					font-size: 28rpx;

					.text0 {
						width: 60rpx;
					}

					.text1 {
						width: 130rpx;
					}

					.active {
						font-weight: bold;
						color: #333333;
					}
				}

				.icon {
					width: 40rpx;
					height: 5rpx;
					background: #0265EB;
					border-radius: 3rpx;
					margin-top: 15rpx;
					margin-left: 10rpx;
					margin-bottom: 10rpx;
				}

				@keyframes mobile1 {
					0% {
						margin-left: 10rpx;
					}

					100% {
						margin-left: 120rpx;
					}
				}

				@keyframes mobile2 {
					0% {
						margin-left: 120rpx;
					}

					100% {
						margin-left: 10rpx;
					}
				}
			}

			.swiper {

				.swiper-item {
					.goods {
						padding: 0 30rpx;

					}

					.swipeaction:last-child {
						.goods {
							.messageitem {
								.item {
									border-bottom: none;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
